<template>
  <section class="container" style="overflow-x: hidden">
    <header>
      <!-- <span>万师傅在线信息填写</span> -->
    </header>
    <main>
      <section>
        <van-cell-group>
          <van-field
            v-model="dataForm.name"
            label="填写姓名"
            placeholder="请输入姓名"
            :colon="true"
            required
            class="rest-margin"
          />
          <van-field
            v-model="dataForm.sex"
            label="填写性别"
            placeholder="请输入性别"
            :colon="true"
            required
            class="rest-margin"
          />
          <van-field class="rest-margin" required @click="showTime()">
            <span slot="label">出生日期:</span>
            <span slot="input">{{ dataForm.birthday }}</span>
          </van-field>

          <van-field class="rest-margin" required>
            <span slot="label">选择工龄:</span>
            <v-select
              slot="input"
              style="width: 100%"
              :searchable="false"
              :close-on-select="true"
              :options-label="'label'"
              :options-value="'value'"
              v-model="dataForm.workHour"
              :options="workHourOption"
            >
            </v-select>
          </van-field>
          <van-field
            class="work_type"
            required
            @click="redirectTo"
            label="选择工种："
          >
            <span slot="input" v-if="getworld.length == 0">
              <span style="">请选择工种 </span>
            </span>
            <span
              slot="input"
              v-else
              style="
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >
              <span
                style="
                  color: white;
                  background: #ee3f00;
                  padding: 2px;
                  border-radius: 4px;
                "
                v-for="(item, index) in getworld"
                :key="index"
                :style="index != 0 ? 'margin-left:4px;' : null"
                @click="deletab(index, item)"
                >{{ item + 'X' }}
              </span>
            </span>
            <!-- <span slot="label">选择工种:</span>
            <v-select
              slot="input"
              style="width: 100%"
              :multiple="true"
              :selectable="selectWkType"
              :searchable="false"
              :close-on-select="true"
              :options-label="'label'"
              :options-value="'value'"
              v-model="dataForm.workType"
              :options="workTypeOption"
              placeholder="可多选二种"
            ></v-select> -->
          </van-field>
          <van-field
            v-model="dataForm.tel"
            label="联系电话"
            placeholder="请输入联系电话"
            :colon="true"
            required
            class="rest-margin"
          />

          <van-field
            class="rest-margin ellipsis"
            required
            @click="showPopup"
            label="施工地区"
          >
            <span slot="input">
              <span> {{ address == '' ? '请选择地区' : address }}</span>
              &#12288;</span
            >
          </van-field>
          <van-field class="rest-margin" required>
            <span slot="label">人员构成:</span>
            <v-select
              slot="input"
              style="width: 100%"
              :searchable="false"
              :close-on-select="true"
              :options-label="'label'"
              :options-value="'value'"
              v-model="dataForm.personnelState"
              :options="personnelStateOption"
            >
            </v-select>
          </van-field>
          <van-field
            v-model="dataForm.personnelNum"
            label="施工人数"
            placeholder="请输入施工人数"
            :colon="true"
            class="rest-margin"
          />

          <van-field class="rest-margin" required>
            <span slot="label">施工方式:</span>
            <v-select
              slot="input"
              style="width: 100%"
              :multiple="true"
              :selectable="selectWkType"
              :searchable="false"
              :close-on-select="true"
              :options-label="'label'"
              :options-value="'value'"
              v-model="dataForm.workMode"
              :options="constructi"
              placeholder="可多选二种"
            ></v-select>
          </van-field>
        </van-cell-group>
      </section>
      <!-- <article class="pic-container">
        <div>
          <div class="van-cell__title van-field__label" style="width: 100%">
            <span>技能证书或作品展示图：</span>
          </div>
        </div>
        <ul>
          <li>
            <van-uploader
              :before-delete="beforeDelete1"
              :before-read="beforeRead"
              :after-read="afterRead1"
              v-model="fileList1"
              :multiple="false"
              :max-count="1"
              preview-size="80px"
            />
          </li>
          <li>
            <van-uploader
              :before-delete="beforeDelete2"
              :before-read="beforeRead"
              :after-read="afterRead2"
              v-model="fileList2"
              :multiple="false"
              :max-count="1"
              preview-size="80px"
            />
          </li>
          <li>
            <van-uploader
              :before-delete="beforeDelete3"
              :before-read="beforeRead"
              :after-read="afterRead3"
              v-model="fileList3"
              :multiple="false"
              :max-count="1"
              preview-size="80px"
            />
          </li>
        </ul>
      </article>-->
      <!--<header>
        <div
          class="circle"
          @click="showPortraitPopup"
          :style="{
            backgroundImage: `url(${
              dataForm.headPortrait ? dataForm.headPortrait : ''
            })`,
          }"
        >
          <span v-show="!dataForm.headPortrait" style="font-size: 13px"
          >点击</span
          >
          <span v-show="!dataForm.headPortrait" style="font-size: 13px"
          >上传</span
          >
          <span v-show="!dataForm.headPortrait" style="font-size: 13px"
          >头像</span
          >
        </div>
      </header>-->
      <article class="pic-container">
        <div>
          <div class="van-cell__title van-field__label" style="width: 100%">
            <span class="my-required">请从手机相册选择图片上传</span>
          </div>
        </div>
        <ul>
          <li v-if="false">
            <van-uploader
              :before-delete="beforeDelete4"
              :before-read="beforeRead"
              :after-read="afterRead4"
              v-model="fileList4"
              :multiple="false"
              :max-count="1"
              upload-text="身份证正面"
              preview-size="80px"
            />
          </li>
          <li v-if="false">
            <van-uploader
              :before-delete="beforeDelete5"
              :before-read="beforeRead"
              :after-read="afterRead5"
              v-model="fileList5"
              :multiple="false"
              :max-count="1"
              upload-text="身份证反面"
              preview-size="80px"
            />
          </li>
          <li>
            <van-uploader
              :before-delete="beforeDelete6"
              :before-read="beforeRead"
              :after-read="afterRead6"
              v-model="fileList6"
              :multiple="false"
              :max-count="1"
              upload-text="上传头像"
              preview-size="80px"
            />
          </li>
          <li
            v-if="false"
            @click="$router.push({ path: '/info/xitpt?id=2' })"
            style="margin-left: 10px"
          >
            点击选择系统图片→
          </li>
          <li style="visibility: hidden">
            <van-uploader upload-text="占坑" preview-size="80px" />
          </li>
        </ul>
      </article>
      <footer>
        <div class="descripition">
          <span>提醒:信息审核需要1~3天</span>
        </div>
        <div class="submit-container" style="padding-bottom: 20px">
          <span @click="handleSubmit"
            ><span style="visibility: hidden">占</span>提交<span
              style="visibility: hidden"
              >坑</span
            ></span
          >
        </div>
      </footer>
    </main>
    <footer></footer>
    <!--pop弹窗区域-->
    <article>
      <van-popup v-model="show" position="bottom">
        <van-area
          title="选择地址"
          columns-num="3"
          :area-list="areaList"
          @confirm="addConfirm_district"
          @cancel="hideAreaItem_district"
          :value="city.code"
        />
      </van-popup>
      <van-popup v-model="showPortraitPop" position="top">
        <section class="portrait-container">
          <h3>头像上传</h3>
          <div>
            <van-uploader
              :before-delete="beforeDelete6"
              :before-read="beforeRead"
              :after-read="afterRead6"
              v-model="fileList6"
              :multiple="false"
              :max-count="1"
              preview-size="100px"
            />
          </div>
          <div class="submit-container">
            <span @click="handleUploadPortrait">确定</span>
          </div>
        </section>
      </van-popup>
      <van-popup v-model="showtime" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          @confirm="timeConfirm"
          type="year-month"
          @cancel="hideTime"
          :min-date="minDate"
          :max-date="maxDate"
          title="选择出生年月"
        />
      </van-popup>
    </article>
    <!-- 弹窗选项 -->
    <div
      @click="disappear"
      style="
        height: 100%;
        width: 100%;
        position: absolute;
        z-index: 11;
        top: 0;
        display: none;
        background: rgba(0, 0, 0, 0.5);
      "
      ref="bcwosl"
    ></div>
    <div
      style="
        height: 40%;
        width: 100%;
        position: absolute;
        z-index: 12;
        bottom: -40%;
        display: none;
        background: #fff;
      "
      ref="wosl"
    >
      <div style="width: 100%; display: flex; justify-content: space-around">
        <p
          @click="disappear"
          style="width: 59%; padding-left: 4%; color: #969799; font-size: 14px"
        >
          取消
        </p>
        <p
          @click="disappear"
          style="width: 10%; color: #576b95; font-size: 14px"
        >
          确认
        </p>
      </div>

      <ul style="width: 92%; flex-wrap: wrap; margin: auto">
        <li
          v-for="(vlu, index) in tabvlue"
          ref="styab"
          :key="vlu.id"
          style="width: 22%; float: left; border-radius: 4px; margin-top: 2px"
          :style="index % 4 != 0 ? 'margin-left: 4%' : null"
          @click="ontap(index, vlu.tab, vlu.id)"
        >
          <p style="width: 100%; text-align: center; margin: 12px 0">
            <span
              style="
                font-size: 14px;
                padding: 0px 2px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
              "
              class="tanspan"
              >{{ vlu.tab }}</span
            >
          </p>
        </li>
      </ul>
    </div>
  </section>
</template>
<script>
import card_front from '@/assets/images/contract/card_front.png';
import card_back from '@/assets/images/contract/card_back.png';
import lrz from 'lrz';
import areaList from '@/views/user/module-address-edit/area_all.json';
import {
  Image,
  Row,
  Col,
  Field,
  Button,
  Popup,
  Area,
  Stepper,
  Uploader,
  Toast,
  DatetimePicker,
  Dialog,
  DropdownMenu,
  DropdownItem,
  Notify,
} from 'vant';
import {
  storageUpload,
  queryContractWork,
  getContractDicItem,
  uploadContractWork_portrait,
  authInfo,
  getContractList,
  byGroupId,
  editContractWork,
} from '@/api/api';
import { setLocalStorage, getLocalStorage } from '@/utils/local-storage';
export default {
  name: '',
  props: {},
  data() {
    return {
      value1: 0,
      newWorktype: [],
      workbol: true,
      option1: [
        {
          text: '省/市选择',
          value: 0,
        },
      ],
      getworld: [],
      tabvlue: [
        { tab: '腻子施工', value: '建筑内外墙施工', id: 0 },
        { tab: '涂料施工', value: '钢结构建筑工地', id: 2 },
        { tab: '防水施工', value: '建筑内外墙施工', id: 5 },
        { tab: '真石漆施工', value: '建筑内外墙施工', id: 7 },
        { tab: '粉刷石膏', value: '建筑内外墙施工', id: 14 },
        { tab: '水泥砂浆', value: '家装工程防水补漏', id: 1 },
        { tab: '防火施工', value: '防腐保温工程施工', id: 3 },
        { tab: '防腐施工', value: '建筑内外墙施工', id: 4 },
        { tab: '划线施工', value: '建筑内外墙施工', id: 8 },
        { tab: '地坪施工', value: '建筑内外墙施工', id: 12 },
        { tab: '其他工种', value: '建筑内外墙施工', id: 13 },
      ],
      show: false,
      active: 0,
      showPortraitPop: false,
      areaList: areaList,
      address: '',
      area_code: '',
      province: {
        name: '省',
        code: '100000',
      },
      city: {
        name: '市',
        code: '100000',
      },
      dataForm: {
        name: '',

        sex: '',
        birthday: '',
        workHour: [],
        workType: [],
        tel: '',
        regionId: '',
        personnelState: [],
        personnelNum: '',
        projectParticipate: '',
        remark: [],
        workMode: [],
        family: '汉族',
        cardBefore: '',
        cardAfter: '',
        headPortrait: '',
        id: '',
        workmethod: '',
      },
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      fileList6: [],
      card_front: card_front,
      card_back: card_back,
      //工种
      workTypeOption: [],
      workHourOption: [],
      personnelStateOption: [],
      constructi: [],
      userId: Number(getLocalStorage('userId').userId),
      headPortrait: '',
      showtime: false,
      minDate: new Date(1920, 0, 1),
      maxDate: new Date(2100, 0, 1),
      currentDate: new Date(),
      womd: [],
      showtu: '',
      fnid: '',
      // shojt: true,
    };
  },
  created() {
    this.fnid = Number(this.$route.query.id);
    // if (String(this.fnid) == 'NaN') {
    //   Toast(3);
    // }

    this.dataForm.id = this.fnid;
    byGroupId({ groupId: 'TTMALL_WORK_MODE' }).then((res) => {
      let obj;
      res.data.data.list.forEach((e) => {
        this.womd.push(e);
        obj = {};
        obj['label'] = e.itemName;
        obj['value'] = e.itemValue;
        this.constructi.push(obj);
      });
    });
    this.init();
    authInfo().then((res) => {
      let userLevel = res.data.data.userLevel;
      let managerLevel = res.data.data.managerLevel;
      if (userLevel == 2) {
        if (managerLevel == 1 || managerLevel == 0) {
          this.showtu = true;
        }
      }
    });
  },
  computed: {},
  methods: {
    // 取消按钮
    disappear() {
      let bcwosl = this.$refs.bcwosl;
      let wosl = this.$refs.wosl;
      wosl.classList.remove('work_selection');
      wosl.className = 'work_cancel';
      wosl.style.transform = '';
      setTimeout(() => {
        wosl.style.display = 'none';
        bcwosl.style.display = 'none';
        this.workbol = true;
      }, 200);
    },
    // 删除
    deletab(index, item) {
      let styab = this.$refs.styab;
      styab.forEach((e) => {
        if (e.childNodes[0].innerText == item) {
          e.classList.remove('getbackr');
        }
      });

      this.getworld.splice(index, 1);
      this.dataForm.workType.splice(index, 1);
      this.worklength = this.getworld.length;
    },
    // tab按钮
    ontap(index, tab, id) {
      let styab = this.$refs.styab;
      let pan = true;
      this.getworld.forEach((e) => {
        if (e == tab) {
          pan = false;
        }
      });
      if (!pan) {
        Toast('请勿重复选择');
        return;
      }
      if (this.worklength == 3) {
        styab.forEach((e) => {
          e.style.color = 'rgb(150, 151, 153)';
        });
        Toast('最多只能选择3个');
        return;
      } else {
        styab.forEach((e) => {
          e.style.color = '';
        });
      }
      this.dataForm.workType.push(String(id));

      this.getworld.push(this.tabvlue[index].tab);
      this.worklength = this.getworld.length;
      styab[index].className = 'getbackr';
      this.active = id;
    },
    // 点击出现
    redirectTo() {
      let wosl = this.$refs.wosl;
      let bcwosl = this.$refs.bcwosl;
      let styab = this.$refs.styab;
      if (this.getworld.length == 3) {
        styab.forEach((e) => {
          e.style.color = 'rgb(150, 151, 153)';
        });
        Toast('最多只能选择3个');
        return;
      } else {
        styab.forEach((e) => {
          e.style.color = '';
        });
      }
      if (this.workbol) {
        wosl.classList.remove('work_cancel');
        wosl.className = 'work_selection';
        wosl.style.display = '';
        bcwosl.style.display = '';
        setTimeout(() => {
          wosl.style.transform = `translateY(${-87}%)`;
        }, 200);
        this.workbol = false;
        return;
      } else if (!this.workbol) {
        wosl.classList.remove('work_selection');
        wosl.className = 'work_cancel';
        wosl.style.transform = '';
        setTimeout(() => {
          wosl.style.display = 'none';
        }, 200);
        this.workbol = true;
        return;
      }
    },

    //日期控件处理函数 begin
    timeConfirm(value) {
      this.dataForm.birthday = this.timeFormat(value);
      this.showtime = false;
    },
    showTime() {
      if (!!this.dataForm.birthday) {
        this.currentDate = new Date(this.dataForm.birthday);
      }

      this.showtime = true;
    },
    timeFormat(time) {
      // 时间格式化 2019-09-08
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      if (month < 10) {
        month = '0' + month;
      }
      return year + '' + month;
    },
    hideTime() {
      this.showtime = false;
    },
    //地区控件处理函数 end
    addConfirm_district(e) {
      if (e[0].code == '100000') {
        this.city.name = '区';
      } else {
        this.province.code = e[0].code;
        this.province.name = e[0].name;
        this.city.code = e[1].code;
        this.city.name = e[1].name;
        this.option1[0]['text'] = this.province.name + this.city.name;
        this.address = this.option1[0]['text'];
        this.dataForm.regionId = this.city.code;
      }
      this.show = false;
    },
    hideAreaItem_district() {
      this.show = false;
    },
    showPopup() {
      this.show = true;
    },
    showPortraitPopup() {
      this.showPortraitPop = !this.showPortraitPop;
    },
    beforeRead(file) {
      //上传之前校验
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        Toast('只允许上传jpg/png格式的图片！');
        return false;
      }
      if (file.size >= 5242880) {
        Toast('只允许上传小于5MB的图片！');
        return false;
      }
      return true;
    },
    async afterRead1(file) {
      //文件读取完成后的回调函数
      let that = this;
      if (file.size < 1048576) {
        //图片小于1MB不压缩
        //成功时执行
        const formData = new FormData();
        formData.append('file', file.file);
        storageUpload(formData)
          .then((res) => {
            that.fileList1.length = 0;
            that.fileList1.push(res.data.data);
          })
          .catch(() => {});
      } else {
        lrz(file.file, {
          //width : 300
          quality: 0.7, //自定义使用压缩方式
        })
          .then(function (rst) {
            //成功时执行
            console.log(rst.formData, rst);
            storageUpload(rst.formData)
              .then((res) => {
                that.fileList1.length = 0;
                that.fileList1.push(res.data.data);
              })
              .catch(() => {});
          })
          .catch(function (error) {
            //失败时执行
          })
          .always(function () {
            //不管成功或失败，都会执行
          });
      }
    },
    async afterRead2(file) {
      //文件读取完成后的回调函数
      let that = this;
      if (file.size < 1048576) {
        //图片小于1MB不压缩
        //成功时执行
        const formData = new FormData();
        formData.append('file', file.file);
        storageUpload(formData)
          .then((res) => {
            that.fileList2.length = 0;
            that.fileList2.push(res.data.data);
          })
          .catch(() => {});
      } else {
        lrz(file.file, {
          //width : 300
          quality: 0.7, //自定义使用压缩方式
        })
          .then(function (rst) {
            //成功时执行
            console.log(rst.formData, rst);
            storageUpload(rst.formData)
              .then((res) => {
                that.fileList2.length = 0;
                that.fileList2.push(res.data.data);
              })
              .catch(() => {});
          })
          .catch(function (error) {
            //失败时执行
          })
          .always(function () {
            //不管成功或失败，都会执行
          });
      }
    },
    async afterRead3(file) {
      //文件读取完成后的回调函数
      let that = this;
      if (file.size < 1048576) {
        //图片小于1MB不压缩
        //成功时执行
        const formData = new FormData();
        formData.append('file', file.file);
        storageUpload(formData)
          .then((res) => {
            that.fileList3.length = 0;
            that.fileList3.push(res.data.data);
          })
          .catch(() => {});
      } else {
        lrz(file.file, {
          //width : 300
          quality: 0.7, //自定义使用压缩方式
        })
          .then(function (rst) {
            //成功时执行
            console.log(rst.formData, rst);
            storageUpload(rst.formData)
              .then((res) => {
                that.fileList3.length = 0;
                that.fileList3.push(res.data.data);
              })
              .catch(() => {});
          })
          .catch(function (error) {
            //失败时执行
          })
          .always(function () {
            //不管成功或失败，都会执行
          });
      }
    },
    async afterRead4(file) {
      //文件读取完成后的回调函数
      let that = this;
      if (file.size < 1048576) {
        //图片小于1MB不压缩
        //成功时执行
        const formData = new FormData();
        formData.append('file', file.file);
        storageUpload(formData)
          .then((res) => {
            that.fileList4.length = 0;
            that.dataForm.cardBefore = '';
            that.fileList4.push(res.data.data);
            that.dataForm.cardBefore =
              that.fileList4[0] && that.fileList4[0]['url']
                ? that.fileList4[0]['url']
                : '';
          })
          .catch(() => {});
      } else {
        lrz(file.file, {
          //width : 300
          quality: 0.7, //自定义使用压缩方式
        })
          .then(function (rst) {
            //成功时执行
            console.log(rst.formData, rst);
            storageUpload(rst.formData)
              .then((res) => {
                that.fileList4.length = 0;
                that.dataForm.cardBefore = '';
                that.fileList4.push(res.data.data);
                that.dataForm.cardBefore =
                  that.fileList4[0] && that.fileList4[0]['url']
                    ? that.fileList4[0]['url']
                    : '';
              })
              .catch(() => {});
          })
          .catch(function (error) {
            //失败时执行
          })
          .always(function () {
            //不管成功或失败，都会执行
          });
      }
    },
    async afterRead5(file) {
      //文件读取完成后的回调函数
      let that = this;
      if (file.size < 1048576) {
        //图片小于1MB不压缩
        //成功时执行
        const formData = new FormData();
        formData.append('file', file.file);
        storageUpload(formData)
          .then((res) => {
            that.fileList5.length = 0;
            that.dataForm.cardAfter = '';
            that.fileList5.push(res.data.data);
            that.dataForm.cardAfter =
              that.fileList5[0] && that.fileList5[0]['url']
                ? that.fileList5[0]['url']
                : '';
          })
          .catch(() => {});
      } else {
        lrz(file.file, {
          //width : 300
          quality: 0.7, //自定义使用压缩方式
        })
          .then(function (rst) {
            //成功时执行

            storageUpload(rst.formData)
              .then((res) => {
                that.fileList5.length = 0;
                that.dataForm.cardAfter = '';
                that.fileList5.push(res.data.data);
                that.dataForm.cardAfter =
                  that.fileList5[0] && that.fileList5[0]['url']
                    ? that.fileList5[0]['url']
                    : '';
              })
              .catch(() => {});
          })
          .catch(function (error) {
            //失败时执行
          })
          .always(function () {
            //不管成功或失败，都会执行
          });
      }
    },
    async afterRead6(file) {
      //文件读取完成后的回调函数
      let that = this;
      if (file.size < 1048576) {
        //图片小于1MB不压缩
        //成功时执行
        const formData = new FormData();
        formData.append('file', file.file);
        storageUpload(formData)
          .then((res) => {
            that.fileList6.length = 0;
            that.fileList6.push(res.data.data);
          })
          .catch(() => {});
      } else {
        lrz(file.file, {
          //width : 300
          quality: 0.7, //自定义使用压缩方式
        })
          .then(function (rst) {
            //成功时执行
            storageUpload(rst.formData)
              .then((res) => {
                that.fileList6.length = 0;
                that.fileList6.push(res.data.data);
              })
              .catch(() => {});
          })
          .catch(function (error) {
            //失败时执行
          })
          .always(function () {
            //不管成功或失败，都会执行
          });
      }
    },
    beforeDelete1(file, detail) {
      this.fileList1.length = 0;
      return true;
    },
    beforeDelete2(file, detail) {
      this.fileList2.length = 0;
      return true;
    },
    beforeDelete3(file, detail) {
      this.fileList3.length = 0;
      return true;
    },
    beforeDelete4(file, detail) {
      this.fileList4.length = 0;
      this.dataForm.cardBefore = '';
      return true;
    },
    beforeDelete5(file, detail) {
      this.fileList5.length = 0;
      this.dataForm.cardAfter = '';
      return true;
    },
    beforeDelete6(file, detail) {
      this.fileList6.length = 0;
      return true;
    },
    selectWkType(option) {
      console.log(this.dataForm.workMode);
      return true;
    },
    async init() {
      await getContractList({ userId: this.userId }).then((res) => {
        if (this.showtu) {
          return;
        }
        if (String(this.fnid) == 'NaN') {
          this.dataForm.id = res.data.data.list[0].id;
        }
      });
      await getContractDicItem()
        .then((res) => {
          const taskDivideList = res.data.data.gozong;
          const personMusterList = res.data.data.gouchenglist;
          const ageList = res.data.data.ageList;
          let obj;
          taskDivideList.forEach((item) => {
            obj = {};
            obj['label'] = item.itemName;
            obj['value'] = item.itemValue;
            this.workTypeOption.push(obj);
          });
          personMusterList.forEach((item) => {
            obj = {};
            obj['label'] = item.itemName;
            obj['value'] = item.itemValue;
            this.personnelStateOption.push(obj);
          });
          ageList.forEach((item) => {
            obj = {};
            obj['label'] = item.itemName;
            obj['value'] = item.itemValue;
            this.workHourOption.push(obj);
          });
        })
        .then(() => {
          this.getInfo();
        })
        .then(() => {});
    },
    getInfo() {
      //获取个人信息

      queryContractWork({ id: this.fnid })
        .then((res) => {
          //说明:查不到数据访问res.data.data 会报错因为没有对象 故先判断
          // let isHaveDate = !!(res.data && res.data.data) || false;

          if (this.showtu) {
            return;
          }
          let shuju = res.data.data;
          if (true) {
            // this.dataForm = res.data.data;
            this.dataForm.name = shuju.name;
            this.dataForm.tel = shuju.tel;
            this.dataForm.personnelNum = shuju.personnelNum;
            console.log(this.womd);
            shuju.workMode.forEach((e) => {
              for (let i = 0; i < this.womd.length; i++) {
                if (e == this.womd[i].itemValue) {
                  this.dataForm.workMode.push(this.womd[i].itemName);
                }
              }
            });

            //性别渲染数据
            let temp_sex = res.data.data.sex;
            if (temp_sex == 0) {
              this.dataForm.sex = '女';
            } else if (temp_sex == 1) {
              this.dataForm.sex = '男';
            } else {
              this.dataForm.sex = '';
            }
            //出生日期渲染数据
            let temp_birthday = res.data.data.birthday || '';
            if (temp_birthday && temp_birthday.length >= 6) {
              this.dataForm.birthday = temp_birthday
                .replace('/', '')
                .substring(0, 6);
            }
            //工龄渲染数据
            let workHour = res.data.data.workHour || -1;
            this.workHourOption.forEach((item) => {
              if (item.value == workHour) {
                this.dataForm.workHour = item;
              }
            });
            //工种渲染数据
            let workType = res.data.data.workType;
            let len = workType.length;

            this.workTypeOption.forEach((item) => {
              for (let i = 0; i < len; i++) {
                if (item.value == workType[i]) {
                  this.getworld.push(item.label);
                  this.dataForm.workType.push(item.value);
                }
              }
            });

            //期望地区渲染数据
            let cityId = res.data.data.regionId || '';
            this.dataForm.regionId = res.data.data.regionId;
            let regexp = /^[1-9]\d{5}$/;
            if (regexp.test(cityId)) {
              let province_code = String(cityId).substring(0, 2) + '0000';
              let city_code = String(cityId).substring(0, 4) + '00';
              let province_name = areaList.province_list[province_code];
              let city_name = areaList.city_list[city_code];
              this.address = province_name + city_name;
              // let district_name = areaList.county_list[district_code];
            }
            //人员构成渲染数据
            let personnelState = res.data.data.personnelState || -1;
            this.personnelStateOption.forEach((item) => {
              if (item.value == personnelState) {
                this.dataForm.personnelState = item;
              }
            });
            //作品展示图渲染数据
            let temp_remark = res.data.data.remark || [];
            for (let i = 0; i < temp_remark.length; i++) {
              if (i == 0 && !!temp_remark[i]) {
                this.fileList1.length = 0;
                this.fileList1.push({
                  url: temp_remark[i],
                });
              }
              if (i == 1 && !!temp_remark[i]) {
                this.fileList2.length = 0;
                this.fileList2.push({
                  url: temp_remark[i],
                });
              }
              if (i == 2 && !!temp_remark[i]) {
                this.fileList3.length = 0;
                this.fileList3.push({
                  url: temp_remark[i],
                });
              }
            }
            //身份证正反面渲染数据
            let temp_cardBefore = res.data.data.cardBefore || '';
            let temp_cardAfter = res.data.data.cardAfter || '';
            if (!!temp_cardBefore) {
              this.fileList4.length = 0;
              this.fileList4.push({
                url: temp_cardBefore,
              });
            }
            if (!!temp_cardAfter) {
              this.fileList5.length = 0;
              this.fileList5.push({
                url: temp_cardAfter,
              });
            }
            //用户头像渲染数据
            let temp_headPortrait = res.data.data.headPortrait || '';
            if (!!temp_headPortrait) {
              this.fileList6 = [];
              this.fileList6.push({
                url: temp_headPortrait,
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleUploadPortrait() {
      //判断是否有图片

      if (!this.userId) {
        return;
      }
      let data = {
        userId: this.userId,
        headPortrait: this.fileList6[0]['url'],
      };
      //请求后端接口
      uploadContractWork_portrait(data).then((res) => {
        this.showPortraitPopup();
        //更新用户信息
        this.getInfo();
      });
    },
    //统一验证 有一个不符合立即回退
    check() {
      let message = {
        res: false,
        mess: '',
      };
      if (!this.dataForm.name) {
        message.mess = '姓名不为空';
      } else if (!this.dataForm.sex) {
        message.mess = '性别不为空';
      } else if (this.dataForm.sex != '男' && this.dataForm.sex != '女') {
        message.mess = '性别只能填入男或者女';
      } else if (!this.dataForm.birthday) {
        message.mess = '出生日期不为空';
      } else if (
        Array.isArray(this.dataForm.workHour) ||
        !this.dataForm.workHour
      ) {
        message.mess = '请选择工龄';
      } else if (this.dataForm.workType[0] == null) {
        message.mess = '请选择工种';
      } else if (!this.dataForm.tel) {
        message.mess = '联系电话不为空';
      } else if (!/^1[0-9]{10}$/.test(this.dataForm.tel)) {
        message.mess = '请填入正确的联系电话';
      } else if (this.dataForm.regionId == '') {
        message.mess = '请选择施工地区';
      } else if (
        this.dataForm.workMode.length == 0 ||
        this.dataForm.workMode[0] == null
      ) {
        message.mess = '请选择施工方式';
      } else if (
        Array.isArray(this.dataForm.personnelState) ||
        !this.dataForm.personnelState
      ) {
        message.mess = '请选择人员构成';
      } else if (
        !/^\d+$/.test(this.dataForm.personnelNum) &&
        this.dataForm.personnelNum != ''
      ) {
        message.mess = '请填入正确的施工人数';
      }
      // else if (!this.dataForm.cardBefore) {
      //   message.mess = '请上传身份证正面';
      // } else if (!this.dataForm.cardAfter) {
      //   message.mess = '请上传身份证反面';
      // }
      else {
        message.res = true;
      }
      return message;
    },
    handleSubmit() {
      let message = this.check();
      if (!message.res) {
        Toast(message.mess);
        return false;
      }
      // if (this.fileList6.length == 0) {
      //   Toast('您没有上传头像');
      //   return;
      // }

      //封装成后端需要的数据
      let _obj = JSON.stringify(this.dataForm);
      let obj = JSON.parse(_obj);

      let workmode = [];

      obj['workMode'].forEach((e) => {
        if (e.value != null) {
          workmode.push(e.value);
        } else {
          if (e == '人工施工') {
            workmode.push('1');
          }
          if (e == '机器施工') {
            workmode.push('0');
          }
        }
      });

      obj['workMode'] = workmode;
      obj['workHour'] = !!obj['workHour']['value']
        ? obj['workHour']['value']
        : '';
      let temp_workType = [];
      if (Array.isArray(obj['workType'])) {
        obj['workType'].forEach((element) => {
          temp_workType.push(element);
        });
      } else {
        temp_workType[0] = !!obj['workType']['value']
          ? obj['workType']['value']
          : '';
      }
      obj['workType'] = temp_workType;
      obj['personnelState'] = !!obj['personnelState']['value']
        ? obj['personnelState']['value']
        : '';
      let temp_remark = [];
      if (this.fileList1[0] && this.fileList1[0]['url']) {
        temp_remark.push(this.fileList1[0]['url']);
      }
      if (this.fileList2[0] && this.fileList2[0]['url']) {
        temp_remark.push(this.fileList2[0]['url']);
      }
      if (this.fileList3[0] && this.fileList3[0]['url']) {
        temp_remark.push(this.fileList3[0]['url']);
      }
      if (this.fileList6.length > 0) {
        obj['headPortrait'] = this.fileList6[0]['url'];
      }
      obj['remark'] = temp_remark;
      obj['userId'] = this.userId;
      obj['family'] = '汉族';
      let temp_birthday = this.dataForm.birthday || '';
      if (temp_birthday.length == 6) {
        obj['birthday'] =
          temp_birthday.substring(0, 4) +
          '/' +
          temp_birthday.substring(4, 6) +
          '/01';
      }
      if (String(this.dataForm.id) != 'NaN') {
        obj['id'] = this.dataForm.id;
      }
      if (obj['sex'] === '男') {
        obj['sex'] = 1;
      } else if (obj['sex'] === '女') {
        obj['sex'] = 0;
      } else {
        obj['sex'] = -1;
      }

      //请求后端接口
      editContractWork(obj)
        .then((res) => {
          Notify({
            type: 'success',
            message: '信息等待审核',
            duration: 5000,
          });
          this.$router.push(`/info/my-workers`);
        })
        .catch(() => {
          Notify({
            type: 'danger',
            message: '操作失败',
            duration: 5000,
          });
        });
    },
  },
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Field.name]: Field,
    [Image.name]: Image,
    [Uploader.name]: Uploader,
    [Popup.name]: Popup,
    [Area.name]: Area,
    [Toast.name]: Toast,
    [Stepper.name]: Stepper,
    [DatetimePicker.name]: DatetimePicker,
    [Dialog.Component.name]: Dialog.Component,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Notify.name]: Notify,
  },
};
</script>
<style lang='scss' scoped>
/deep/.vs__search {
  padding: 0;
  margin-top: 2px;
}
.getbackr {
  color: #fff;
  background: rgb(3, 151, 251);
  .tanspan {
    font-weight: bold;
  }
  // .valuespan {
  //   font-size: 0.52rem;
  // }
}
.pubakr {
  // background: #ededed;
  .tanspan {
    font-size: 0.7rem;
  }
  // .valuespan {
  //   font-size: 0.5rem;
  // }
}
.work_selection {
  transition-duration: 0.3s;
  // transform: translateY(-87%);
}
.work_cancel {
  transition-duration: 0.2s;
  transform: translateY(2%);
}
.container {
  font-size: 16px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: white !important;

  > header {
    margin-top: -5px;
    text-align: center;
    font-weight: bold;
  }

  > main {
    //min-height: 90vh;
    //overflow-y: auto;

    background-color: white;
    padding: 10px;

    > header {
      display: flex;
      justify-content: center;

      .circle {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #ee3f00;
        display: flex;
        flex-direction: column;
        color: white;
        font-size: 14px;
        background-size: 100% 100%;
        background-repeat: no-repeat;

        span {
          flex: 1;
          display: flex;
          justify-content: center;
          letter-spacing: 2px;
        }

        span:nth-of-type(1) {
          align-items: flex-end;
        }

        span:nth-of-type(2) {
          align-items: flex-start;
        }
      }
    }

    > section {
      .chut-row {
        display: flex;
        flex-direction: column;

        .van-field__label {
          //display: flex;
          // flex-direction: column;
          visibility: hidden;
        }

        /deep/.van-field__control {
          border: 1px solid #ebedf0;
        }
      }

      /deep/ .van-dropdown-menu {
        width: 100%;
      }

      .rest-margin {
        /deep/.van-field__label {
          // width: 30% !important;
        }
      }
    }

    > .pic-container {
      padding-left: 16px;
      margin: 10px 0px;
      font-size: 14px;

      ul {
        display: flex;
        //height: 100px;
        //background-color: aqua;
        margin-top: 10px;

        // > li {
        //   flex: 1;
        // }
      }

      .my-required {
        position: relative;
      }

      .my-required::before {
        position: absolute;
        left: -8px;
        top: 2px;
        color: #ee0a24;
        font-size: 14px;
        content: '*';
      }
    }

    > footer {
      > .submit-container {
        text-align: center;

        > span {
          background-color: #ed3f00;
          color: white;
          border-radius: 30px;
          margin: 0 auto;
          margin-bottom: 15px;
          letter-spacing: 5px;
          background-color: #ed3f00;
          padding: 8px 50px;
        }
      }

      > .descripition {
        text-align: center;
        margin: 10px auto;

        > span {
          font-size: 12px;
          color: red;
          font-style: inherit;
        }
      }
    }

    /deep/ .vs__selected {
      background-color: #ee3f00;
      color: #fff;
      border: 0;
    }

    /deep/ .vs__deselect {
      fill: #fff;
    }

    /deep/.van-dropdown-menu__bar {
      padding: 0;
      border-radius: 4px;
      border: 1px solid rgba(60, 60, 60, 0.26);
      height: inherit;
      box-shadow: none;
    }

    /deep/ .van-dropdown-menu__title {
      display: block;
      line-height: 30px;
      width: 100% !important;
      height: 30px;
      padding: 0 8px 0 7px;
      font-size: 14px;
    }
    /deep/.vs__dropdown-toggle {
      border: none !important;
    }
    /deep/.van-dropdown-menu__title::after {
      border-color: transparent transparent rgb(50, 50, 51) rgb(50, 50, 51);
      transform: rotate(-45deg) scale(2);
      opacity: 0.4;
      right: 10px;
    }

    /deep/ .van-dropdown-menu__title--down::after {
      margin-top: 0px;
      transform: rotate(135deg) scale(2);
    }

    .ellipsis {
      /deep/.van-field__value {
        overflow-x: hidden !important;
      }
    }
  }

  > article {
    .portrait-container {
      padding: 10vh;

      h3 {
        transform: translateY(-20px);
        text-align: center;
      }

      > div:nth-of-type(1) {
        display: flex;
        justify-content: center;
      }

      > .submit-container {
        text-align: center;
        margin-top: 20px;

        > span {
          padding: 5px 35px;
          background-color: #ed3f00;
          color: white;
          border-radius: 30px;
          margin: 0 auto;
          letter-spacing: 2px;
          margin-bottom: 15px;
        }
      }
    }
  }
}
</style>
